<template>
  <div>
    <el-container>
      <el-header class="header"> 用户列表 </el-header>
      <el-container>
        <el-header class="main_head">
          <div>
            每页显示记录数：
            <el-select v-model="value" placeholder="10" style="width: 100px">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <el-input
            v-model="input"
            style="width: 40%"
            placeholder="请输入搜索关键字"
            class="input-with-select"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              class="search"
            ></el-button>
          </el-input>
        </el-header>
        <el-main>
          <table>
            <thead>
              <tr>
                <th>
                  <input type="checkbox" />
                  全选
                </th>
                <th>编号</th>
                <th>头像</th>
                <th>用户名</th>
                <th>邮箱</th>
                <th>电话</th>
                <th>操作</th>
              </tr>
            </thead>

            <tbody>
              <tr
                v-for="({ jid, u_pic, uemail, uname, uphone }, i) in data"
                :key="i"
              >
                <td>
                  <input type="checkbox" />
                </td>
                <td>{{ jid }}</td>
                <td class="img">
                  <img :src="imgBase + u_pic" alt="" />
                </td>
                <td>{{ uname }}</td>
                <td>{{ uemail }}</td>
                <td>{{ uphone }}</td>
                <td>
                  <button @click="remove(i)">删除</button>
                </td>
              </tr>
            </tbody>
          </table>
        </el-main>
        <el-footer class="el_footer">
          <div class="pagesize">
            <span>上一页</span>
            <span v-for="n in 5" :key="n">{{ n }}</span>
            <span>下一页</span>
          </div>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState(["imgBase"]),
  },
  data() {
    return {
      input: "",
      options: [
        {
          value: "选项1",
          label: "10",
        },
        {
          value: "选项2",
          label: "20",
        },
        {
          value: "选项3",
          label: "30",
        },
        {
          value: "选项4",
          label: "40",
        },
        {
          value: "选项5",
          label: "50",
        },
      ],
      value: "",
      data: [],
      jid: 1,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    // 点击删除
    remove(jid) {
      // console.log(object);
      this.axios.delete(`v1/users/delUser?jid=${jid + 1}`).then((res) => {
        // console.log("delete", res);
        if (res.data.code == 200) {
          alert("删除成功");
          this.getData();
        } else {
          alert("删除失败");
        }
      });
    },
    getData() {
      this.axios.get("v1/users/all").then((res) => {
        // console.log(res);
        this.data = res.data.data;
        res.data.data.forEach((v) => (this.jid = v.jid));
        // console.log(this.jid);
      });
    },
  },
};
</script>
<style scoped src="../assets/css/user.css">
</style>


